<template>
  <view class="fu-index-list-item" :id="`index-${index}`">
    <!-- 索引标题 -->
    <view class="fu-index-list-item__title">{{ index }}</view>
    <!-- 列表内容 -->
    <view class="fu-index-list-item__content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
/**
 * @description 索引列表项组件
 * @property {String} index - 索引值
 */
export default {
  name: 'FuIndexListItem',
  
  props: {
    index: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.fu-index-list-item__title {
  padding: 10rpx 30rpx;
  background-color: #f8f8f8;
  font-size: 28rpx;
  color: #999;
}

.fu-index-list-item__content {
  background-color: #fff;
}
</style> 